<template>
	<div style="padding: 20px; background: #f5f7fa">
		<!-- 搜索区域 -->
		<div class="search-area card">
			<el-form :model="formData" size="mini" label-width="auto" label-position="left" inline>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="票号">
							<el-input v-model="formData.invoiceNumber" placeholder="输入票号查询"></el-input>
						</el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
					</el-col>
					<!-- <el-col :span="6">

					</el-col> -->
				</el-row>
			</el-form>
		</div>

		<!-- 表格部分 -->
		<div class="table-container card">
			<el-table
				:data="tableData"
				border
				highlight-current-row
				size="mini"
				:header-cell-style="{background:'#f5f7fa',color:'#606266',fontSize:'14px',fontWeight:'600',textAlign:'center'}"
				:cell-style="{fontSize:'12px',padding:'6px 0',textAlign:'center'}"
				height="700"
			>
				<!-- 显示字段列 -->
				<el-table-column prop="id" label="票号" width="80"></el-table-column>
				<el-table-column prop="agent" label="经办人" width="120"></el-table-column>
				<el-table-column prop="department" label="经办部门" width="150"></el-table-column>
				<el-table-column prop="applicationDate" label="申请日期" width="150"></el-table-column>
				<el-table-column prop="paymentStatus" label="款项情况" width="120"></el-table-column>
				<el-table-column prop="contractNumber" label="合同编号" width="150"></el-table-column>
				<el-table-column prop="applyUnit" label="申请单位" width="150"></el-table-column>
				<el-table-column prop="purchaseUnit" label="购买单位名称" width="150"></el-table-column>
				<el-table-column prop="invoiceType" label="发票类型" width="120"></el-table-column>
				<el-table-column prop="taxNumber" label="税号" width="150"></el-table-column>
				<el-table-column prop="address" label="地址" width="200"></el-table-column>
				<el-table-column prop="phone" label="电话" width="150"></el-table-column>
				<el-table-column prop="bank" label="开户行" width="150"></el-table-column>
				<el-table-column prop="bankAccount" label="银行账号" width="200"></el-table-column>
				<el-table-column prop="invoiceAmount" label="开票金额" width="120"></el-table-column>
				<el-table-column prop="remark" label="备注" width="200"></el-table-column>

				<!-- 操作按钮 -->
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<!-- <el-button type="text" size="small" @click="editRecord(scope.row)">编辑</el-button> -->
						<el-button type="text" size="small" @click="deleteRecord(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		
		<!-- 分页 -->
    <pagination
        v-show="total>0"
        :total="total"
        :page.sync="formData.pageNum"
        :limit.sync="formData.pageSize"
        @pagination="getList"
    />

		<!-- 编辑/新增记录的弹窗 -->
		<el-dialog :title="isEdit ? '编辑记录' : '新增记录'" :visible.sync="dialogVisible" width="800px" class="dialog">
			<el-form :model="dialogForm" size="small" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="经办人" prop="agent">
							<el-input v-model="dialogForm.agent"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="经办部门" prop="department">
							<el-input v-model="dialogForm.department"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="申请日期" prop="application_date">
							<el-date-picker v-model="dialogForm.application_date" type="date" placeholder="请选择日期"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="款项情况" prop="payment_status">
							<el-input v-model="dialogForm.payment_status"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="合同编号" prop="contract_number">
							<el-input v-model="dialogForm.contract_number"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="申请单位" prop="apply_unit">
							<el-input v-model="dialogForm.apply_unit"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 添加其他字段表单控件 -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveRecord">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { list } from "@/api/monitor/invoice";
export default {
	data() {
		return {
            tableHeaderStyle: {
				backgroundColor: '#f0f2f5', // 表头背景色
				color: '#409EFF',           // 表头文字颜色
				fontWeight: 'bold',         // 表头文字加粗
				textAlign: 'center'         // 表头文字居中对齐
			},
			formData: {
				invoiceNumber: '',
        pageNum: 1,
        pageSize: 15,
			},
			tableData: [], // 表格数据

			total: 0,
			dialogVisible: false,
			isEdit: false,
			dialogForm: {}
		};
	},
    created() {
    	this.getList()
  	} ,
	methods: {
        // 获取列表数据
		getList() {
			this.loading = true;
			list(this.formData).then(response => {
				console.log("初始化数据室")
				console.log(response)
				this.tableData = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		handleSearch() {
      this.getList();
		},
		addRecord() {
			this.dialogVisible = true;
			this.isEdit = false;
			this.dialogForm = {}; // 清空表单
		},
		editRecord(row) {
			this.dialogVisible = true;
			this.isEdit = true;
			this.dialogForm = { ...row }; // 填充表单
		},
		saveRecord() {
			console.log('保存记录：', this.dialogForm);
			this.dialogVisible = false;
		},
		deleteRecord(id) {
			console.log('删除记录，ID：', id);
			// 执行删除逻辑
		}
	}
};
</script>
